<template>
	<view>
		<view class="u-card-box u-m-b-20 u-flex u-row-between" v-for="(item,index) in list" :key="item.id" @click="goActivityDetial(item)">
			<view class="u-flex u-col-top u-ellipsis">
				<u-image width="200rpx" height="140rpx" border-radius="20" :src="item.img_wap" mode="widthFix"></u-image>
				<view class="u-m-l-20 u-flex-1 u-ellipsis">
					<view class="u-flex u-ellipsis">
						<view class="u-tag-box" :class="item.activity_status !== 1 ? 'u-back-gray' : 'u-back-red'">{{handleGetStatus(item.activity_status)}}</view>
						<view class="u-m-l-10 u-font-title u-ellipsis">{{item.title}}</view>
					</view>
					<view class="u-m-t-10 u-flex u-col-top">
						<u-icon class="u-m-t-5" name="clock-fill" color="#868B9A" size="30"></u-icon>
						<view class="u-m-l-10 u-font-desc u-color-gray u-ellipsis">{{item.activity_time}}</view>
					</view>
					<view class="u-m-t-10 u-flex" v-if="item.activity_site">
						<u-icon name="map-fill" color="#868B9A" size="30"></u-icon>
						<view class="u-m-l-10 u-font-desc u-color-gray u-ellipsis">{{item.activity_site}}</view>
					</view>
					<!-- <view class="u-m-t-10 u-p-b-20 u-flex">
						<u-icon name="eye-fill" color="#868B9A" size="30"></u-icon>
						<view class="u-m-l-10 u-font-desc u-color-gray">浏览量：{{item.view_number}}</view>
					</view> -->
					<view class="u-border-top u-p-t-15 u-flex u-row-between">
						<view class="ticket_tag" v-if="isRecord && item.ticket_name">
							<u-icon name="coupon-fill" color="#00C377" size="34"></u-icon>
							<view class="u-m-l-10">{{item.ticket_name}}</view>
						</view>
						<view class="u-font-desc">
							<span>报名费：</span>
							<span class="u-color-red" v-if="[1].includes(item.is_charge)">付费</span>
							<span class="u-color-red" v-else-if="[2].includes(item.is_charge)">免费/付费</span>
							<span class="u-color-red" v-else>免费</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { activityStatus } from '@/utils/index.js'
	export default{
		props: ['list','isRecord'],
		props: {
			list:{
				type: Array
			},
			isRecord:{
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				status:['']
			}
		},
		methods:{
			goActivityDetial(val){
				this.$emit("goActivityDetial",val)
			},
			handleGetStatus(val){
				return activityStatus()[val]
			}
		}
	}
</script>

<style scoped>
	.ticket_tag{
		background: #E7FAF0;
		color: #3ACD8E;
		display: flex;
		align-items: center;
		padding: 8rpx 15rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
	}
</style>